<template>
	<view>
		<view class="fixed">
			<!-- 状态栏 -->
			<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
			<view class="myheader padding-sm  flex justify-between">
				<view class="font-sub-title">
					<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
					我的位置
				</view>
				<picker mode="date" :value="date" @change="bindDateChange">
					<text class="font-sub-title cuIcon-calendar"></text>
				</picker>
			</view>

		</view>
		<map :style="{marginTop:navHeight}" style="height: 600rpx;" :latitude="latitude"  :longitude="longitude" :markers="markers">
		</map>
		<scroll-view @scrolltolower="toBottom" :style="{height:getHeight}" style="margin-top: -15rpx;" scroll-y="true">
			<view  class="cu-list menu sm-border my-positionlist"  v-if="varList.length!=0">
				<view class="my-item font-normal" v-for="data in varList" @tap="setMap(data.latitude,data.longitude)">
					<text class="margin-right">{{data.address}} </text>
					<view class="font-normal flex justify-between">
						<text class="margin-right" :class="data.deviate=='1'?'text-red':'text-green'"> {{data.deviate=='1'?'已偏离':'未偏离'}}</text>
						<text class="margin-right"> {{data.terminalTime.substring(0,16)}}</text>
					</view>
				</view>
				<!-- 加载更多 -->
				<biaofun-loading-more :loading="loading" :loadall="loadAll"></biaofun-loading-more>
			</view>
			<view v-else class="no_data">
				<image src="../../static/img/no_data.png" class="no_data_img" mode="widthFix"></image>
				<view class="font-sub-title">暂无数据</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		formatDateDay
	} from '@/utils/datetime.js'
	import biaofunLoadingMore from '@/components/biaofun-loading-more/biaofun-loading-more.vue';
	import {
		mapGetters
	} from 'vuex'
	var bmap = require('@/common/lib/bmap-wx.min.js');
	var that;
	export default {
		components: {
			biaofunLoadingMore
		},
		computed: {
			...mapGetters(['navHeight']),
			getHeight(){
				var windowHeight = uni.getSystemInfoSync().windowHeight
				return windowHeight -  uni.getSystemInfoSync().statusBarHeight-60 - uni.upx2px(600) +'px'
			}
		},
		data() {
			return {
				user:'',
				statusBarHeight: Vue.prototype.StatusBar,
				latitude: '',
				longitude: '',
				pageNum:1,
				pageSize:10,
				markers: [{
					title:'',
					latitude:'',
					longitude:'',
					iconPath: '../../static/img/point.png'
				}],
				date: '',
				varList: [],
				loading: false, // 正在加载中？
				loadAll: false, // 加载了全部数据？
			}
		},
		onLoad() {
			that = this;
			plus.geolocation.getCurrentPosition(function(res){
					that.latitude = res.coords.latitude
					that.longitude = res.coords.longitude
					that.markers[0].latitude = that.latitude
					that.markers[0].longitude = that.longitude
				},function(err){
					if(err.code==1){
						uni.showToast({
							"title":"请打开GPS定位或检查应用定位权限",
							"position":"bottom",
							"icon":"none"
						})
					}else if(err.code==2){
						uni.showToast({
							"title":'定位失败，由于设备当前 GPS 状态差（或网络不畅）,建议持设备到相对开阔的露天场所再次尝试',
							"position":"bottom",
							"icon":"none"
						})
					}
				}
			)
			that.date = formatDateDay(new Date())
			this.getData(that.date)
			this.user = uni.getStorageSync("userInfo")
		},
		methods: {
			toBottom(){
				// 判断是否加载完了全部数据
				if(!this.loadAll) {
					// 查询列表数据
					this.getData(that.date);
				}
			},
			getData(date){
				
				this.loading=true
				uni.showLoading({
					title:"加载中..."
				})
				this.$http.getBLLocation({
					pageNum:that.pageNum,
					pageSize:that.pageSize,
					startTime:date,
					endTime:date,
					sort:"2"
				}).then((res)=>{
					uni.hideLoading()
					this.loading=false
					that.varList=that.varList.concat(res.content);
					if(that.varList.length>0){
						that.setMap(that.varList[0].latitude,that.varList[0].longitude)
					}
					if(res.content.length<that.pageSize){
						// 更新 loadAll 状态
						that.loadAll = true;
						// 更新 loading 状态
						that.loading = false;
					}else {
						// 更新 loadAll 状态
						that.loadAll = false;
						// 更新 loading 状态
						that.loading = false;
						// 将下次请求的页数+1
						that.pageNum = that.pageNum + 1;
					}
				})
			},
			back() {
				uni.navigateBack();
			},
			setMap(latitude,longitude){
				that.latitude = latitude
				that.longitude = longitude
				that.markers[0].latitude = latitude
				that.markers[0].longitude = longitude
			},
			bindDateChange: function(e) {
				this.date = e.target.value
				that.loading = false
				that.loadAll = false
				that.varList=[]
				this.pageNum=1
				this.getData(this.date)
			},
		}
	}
</script>

<style>

	.my-item{
		padding: 10rpx 20rpx;
		position: relative;
	}
	.my-item:after {
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
		width: 200%;
		height: 200%;
		border-bottom: 1upx solid #ddd;
		border-radius: inherit;
		content: " ";
		transform: scale(.5);
		transform-origin: 0 0;
		pointer-events: none
	}
	.ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.2;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.no_data,.no_data_img{
		margin-top: 100rpx;
	}
	map{
		width: 100%;
		height: 500rpx;
	}
</style>
